<template>
  <div>
    <el-table
      v-loading="tableLoading"
      :data="dailyPlanData"
      :default-sort="{prop: 'generateTime', order: 'descending'}"
    >
      <el-table-column label="道路编号" align="center" sortable prop="roadID" />
      <el-table-column label="道路名称" align="center" prop="roadName" />
      <el-table-column sortable label="生成时间" align="center" prop="generateTime" />
      <el-table-column label="检测时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.dailyInspectEnrollDate? toTimeString(row.dailyInspectEnrollDate) : '暂无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="登记情况" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.inspectorID ? 'success': 'danger'">{{ row.inspectorID? '已登记' : '未登记' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="检测人" align="center">
        <template slot-scope="{row}">
          <span>{{ row.inspectorID? row.inspectorID: '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="160" fixed="right" label="操作" align="center">
        <template slot-scope="{row}">
          <el-button
            size="small"
            type="primary"
            :disabled="isExpired(row.dailyInspecteDate)"
            icon="el-icon-edit"
            circle
            @click="updateInspection(row.dailyInspecteID,row.inspectorID)"
          />
          <el-button
            size="small"
            :type="getNoticeColor(row.damageNoticeID,row.noticeStatus)"
            :disabled="isEnroll(row.inspectorID)"
            icon="el-icon-bell"
            circle
            @click="addDamageNotice(row.dailyInspecteID, row.damageNoticeID,row.noticeStatus)"
          />
          <el-button size="small" type="info" icon="el-icon-more" circle @click="moreInspection(row.dailyInspecteID, row.roadName)" />
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="dialogProps.title"
      width="40%"
      :visible.sync="dialogVisible"
      :destroy-on-close="true"
      @closed="detailDialogClose"
    >
      <DetailFrom v-if="dialogProps.detailFormVisible" :data="detailDialogData" />
      <EnrollFrom
        v-if="dialogProps.enrollFormVisible"
        :is-edit="dialogProps.isEdit"
        :daily-inspect-i-d="dialogProps.dailyInspectId"
        @success="enrollSuccess"
      />
      <DamageNotice
        v-if="dialogProps.damageNoticeVisible"
        :notice-status="dialogProps.noticeStatus"
        :daily-inspect-id="dialogProps.dailyInspectId"
        :damage-notice-id="dialogProps.damageNoticeID"
        @success="enrollSuccess"
      />
    </el-dialog></div>
</template>

<script>
import { mapGetters } from 'vuex'
import { dailyInspectionPlan, searchDailyInspection } from '@/api/dailyInspection'
import { toTimeString } from '@/utils/time-handle'
import DetailFrom from '@/views/daily-inspection/components/DetailFrom'
import EnrollFrom from '@/views/daily-inspection/components/EnrollFrom'
import DamageNotice from '@/views/daily-inspection/components/DamageNotice'

export default {
  name: 'InspectionPlanTable',
  components: { DamageNotice, EnrollFrom, DetailFrom },
  data() {
    return {
      tableLoading: true,
      dialogProps: {
        title: '详细信息',
        detailFormVisible: false,
        enrollFormVisible: false,
        damageNoticeVisible: false,
        noticeStatus: '',
        damageNoticeID: '',
        dailyInspectId: '',
        isEdit: false
      },
      dialogVisible: false,
      detailDialogData: {},
      dailyPlanData: []
    }
  },
  computed: {
    ...mapGetters([
      'departmentId',
      'superDepartmentId',
      'roles'
    ])
  },
  created() {
    this.getDailyPlan()
  },
  methods: {
    toTimeString,
    detailDialogClose() {
      this.dialogVisible = false
      this.dialogProps = {
        title: '详细信息',
        detailFormVisible: false,
        enrollFormVisible: false,
        damageNoticeVisible: false
      }
    },
    updateInspection(id, isEdit) {
      this.dialogProps.isEdit = !!isEdit
      this.dialogProps.dailyInspectId = id
      this.dialogProps.title = '巡检登记'
      this.dialogProps.enrollFormVisible = true
      this.dialogVisible = true
    },
    getNoticeStatus(noticeId, noticeStatus) {
      return noticeId ? (noticeStatus + 1) : 0
    },
    getNoticeColor(noticeId, noticeStatus) {
      switch (this.getNoticeStatus(noticeId, noticeStatus)) {
        case 0:
          return ''
        case 1:
          return 'warning'
        case 2:
          return 'success'
        case 3:
          return 'danger'
      }
    },
    enrollSuccess() {
      this.dialogVisible = false
      this.getDailyPlan()
    },
    isExpired(generateTime) {
      const start = new Date(toTimeString(generateTime))
      start.setDate(start.getDate() + 2)
      const now = new Date(Date.now())
      return now.getTime() > start.getTime()
    },
    isEnroll(inspectorId) {
      return !inspectorId
    },
    addDamageNotice(dailyInspectId, noticeId, status) {
      let noticeStatus = this.getNoticeStatus(noticeId, status)
      if (noticeStatus === 3) { noticeStatus = 1 }
      this.dialogVisible = true
      this.dialogProps = {
        title: '详细信息',
        detailFormVisible: false,
        enrollFormVisible: false,
        damageNoticeVisible: true,
        noticeStatus,
        damageNoticeID: noticeId,
        dailyInspectId
      }
    },
    moreInspection(id, roadName) {
      const params = { id }
      searchDailyInspection(params).then(data => {
        this.detailDialogData = data[0]
        this.detailDialogData.roadName = roadName
        if (this.detailDialogData.inspectorID) {
          this.detailDialogData.status = '已检测'
          this.detailDialogData.tagStatus = 'success'
        } else {
          this.detailDialogData.status = '未检测'
          this.detailDialogData.tagStatus = 'danger'
        }
        this.dialogProps.detailFormVisible = true
        this.dialogVisible = true
      })
    },
    getDailyPlan() {
      this.tableLoading = true
      let params = {}
      if (this.roles[0] === '2') {
        params = {
          departmentID: this.departmentId
        }
      } else {
        params = {
          departmentID: this.superDepartmentId
        }
      }
      dailyInspectionPlan(params).then(data => {
        this.dailyPlanData = data
        this.dailyPlanData.forEach(row => {
          row.generateTime = toTimeString(row.dailyInspecteDate)
        })
        setTimeout(() => {
          this.$message.success('已刷新日常巡检计划表')
          this.tableLoading = false
        }, 100)
      })
    }
  }
}
</script>

<style scoped>

</style>
